<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <script src="../vue_lib/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app" v-once>
    {{ message }}
    <p v-html="rawHtml"></p>
    <div v-bind:class="color">绑定class</div>
    <p>{{ number + 1 }}</p>
    <p>{{ question ? "我是真的":"我是假的" }}</p>
    <p>{{ msg.split('').reverse().join('') }}</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hi Vue!",
            rawHtml:'<span style="color:red">我是红色的字</span>',
            color:'blue',
            number:10,
            question:false,
            msg:'123456789'
        }
    });
    vm.message = 'vue'
</script>
<style>
    .red{
        color: red;
    }
    .blue{
        color:blue;
        font-size: 100px;
    }
</style>

</body>
</html>